import React, { useEffect, useMemo, useState } from "react";
import instance from "../../api/request";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import styles from "./Index.module.css";
import { Avatar } from "antd-mobile";
function Index() {
  const [sp] = useSearchParams();
  const spObj = useMemo(() => Object.fromEntries(sp), [sp]);

  const [yaodetail, setYaodetail] = useState([]);
  const { id } = useParams();
  const nav=useNavigate()

  const getyao = () => {
    instance
      .get("/api/share/knowledgeBase/v1/findDrugsKnowledge", {
        params: {
          id: id,
        },
      })
      .then((res) => {
        console.log(res, "=====药品详情");
        setYaodetail(res.data.result);
      });
  };

  useEffect(() => {
    getyao();
  }, []);

  return (
    <div className={styles.zong}>
      <div className={styles.heard}>
        <div className={styles.wen} onClick={()=>nav('/person')}>
          <Avatar src="" style={{ "--border-radius": "50%" }} />
        </div>

        <div className={styles.icon}>
          <img src="/heil.png" alt="" />
        </div>
      </div>

      <div className={styles.hong}>
        本模块知识仅供参考，如有需要，请在医生指导下使用
      </div>

      <div className={styles.wenz}>
        <h2>{spObj.title}</h2>

        <div style={{ marginTop: "10px" }}>
          <span>
            <b style={{ color: "#81b6f3" }}>[药品成分]</b>
            <p>
              {yaodetail.component && yaodetail.component.length > 0 ? (
                <span>{yaodetail.component}</span>
              ) : (
                <span>无</span>
              )}
            </p>
          </span>
        </div>

        <div style={{ marginTop: "10px" }}>
          <span>
            <b style={{ color: "#81b6f3" }}>[用药禁忌]</b>
            <p>
              {yaodetail.mindMatter && yaodetail.mindMatter.length > 0 ? (
                <span>{yaodetail.mindMatter}</span>
              ) : (
                <span>无</span>
              )}
            </p>
          </span>
        </div>

        <div style={{ marginTop: "10px" }}>
          <span>
            <b style={{ color: "#81b6f3" }}>[功能主治]</b>
            <p>
              {yaodetail.effect && yaodetail.effect.length > 0 ? (
                <span>{yaodetail.effect}</span>
              ) : (
                <span>无</span>
              )}
            </p>
          </span>
        </div>

        <div style={{ marginTop: "10px" }}>
          <span>
            <b style={{ color: "#81b6f3" }}>[用法用量]</b>
            <p>
              {yaodetail.usage && yaodetail.usage.length > 0 ? (
                <span>{yaodetail.usage}</span>
              ) : (
                <span>无</span>
              )}
            </p>
          </span>
        </div>

        <div style={{ marginTop: "10px" }}>
          <span>
            <b style={{ color: "#81b6f3" }}>[药品性状]</b>
            <p>
              {yaodetail.shape && yaodetail.shape.length > 0 ? (
                <span>{yaodetail.shape}</span>
              ) : (
                <span>无</span>
              )}
            </p>
          </span>
        </div>

        <div style={{ marginTop: "10px" }}>
          <span>
            <b style={{ color: "#81b6f3" }}>[包装规格]</b>
            <p>
              {yaodetail.packing && yaodetail.packing.length > 0 ? (
                <span>{yaodetail.packing}</span>
              ) : (
                <span>无</span>
              )}
            </p>
          </span>
        </div>

        <div style={{ marginTop: "10px" }}>
          <span>
            <b style={{ color: "#81b6f3" }}>[不良反应]</b>
            <p>
              {yaodetail.sideEffects && yaodetail.sideEffects.length > 0 ? (
                <span>{yaodetail.sideEffects}</span>
              ) : (
                <span>无</span>
              )}
            </p>
          </span>
        </div>

        <div style={{ marginTop: "10px" }}>
          <span>
            <b style={{ color: "#81b6f3" }}>[贮藏条件]</b>
            <p>
              {yaodetail.storage && yaodetail.storage.length > 0 ? (
                <span>{yaodetail.storage}</span>
              ) : (
                <span>无</span>
              )}
            </p>
          </span>
        </div>

        <div style={{ marginTop: "10px" }}>
          <span>
            <b style={{ color: "#81b6f3" }}>[注意事项]</b>
            <p>
              {yaodetail.taboo && yaodetail.taboo.length > 0 ? (
                <span>{yaodetail.taboo}</span>
              ) : (
                <span>无</span>
              )}
            </p>
          </span>
        </div>

        <div style={{ marginTop: "10px" }}>
          <span>
            <b style={{ color: "#81b6f3" }}>[注意事项]</b>
            <p>
              {yaodetail.approvalNumber &&
              yaodetail.approvalNumber.length > 0 ? (
                <span>{yaodetail.approvalNumber}</span>
              ) : (
                <span>无</span>
              )}
            </p>
          </span>
        </div>
      </div>
    </div>
  );
}

export default Index;
